
<template>
  <div style="background: #fff;height: 100%;width: 100%;position: relative;overflow: hidden;" id="charId5" class="_wz_char">

  </div>
</template>
<script>
export default {
  props: ["charHeight","charId"],
  data() {
    return {}
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let data = [{
      type: '1-3秒',
      value: 0.16
    }, {
      type: '4-10秒',
      value: 0.125
    }, {
      type: '11-30秒',
      value: 0.24
    }, {
      type: '31-60秒',
      value: 0.19
    }, {
      type: '1-3分',
      value: 0.22
    }, {
      type: '3-10分',
      value: 0.05
    }, {
      type: '10-30分',
      value: 0.01
    }, {
      type: '30+分',
      value: 0.015
    }];

    let chart = new G2.Chart({
      container: 'charId5',
      forceFit: true,
      height: 400-51-16-16,
      padding: [20, 20, 50, 40]
    });
    chart.source(data);
    chart.axis('type', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        }
      },
      tickLine: {
        alignWithLabel: false,
        length: 0
      }
    });

    chart.axis('value', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        },
        formatter: function formatter(val) {
          return String(parseFloat(val * 100)) + '%';
        }
      }
    });
    chart.legend(false);
    chart.interval().position('type*value').opacity(1).color('type', function(val) {
      if (val === '10-30分' || val === '30+分') {
        return '#ff4d4f';
      }
      return '#2194ff';
    }).label('value', {
      formatter: function formatter(text) {
        let val = parseFloat(text);
        if (val < 0.05) {
          return (val * 100).toFixed(1) + '%';
        }
      },
      offset: 10
    });

    chart.render();
  },
  methods: {//执行的方法

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
